<template>
  <div>
    <div id="search">
      <div class="search_wrap">
        <div class="search_bar">
          <i class="iconfont icon-Magnifier" style="font-size: 19px; padding: 0 5px;"></i>
          <input type="text" placeholder="搜电影、搜影院" id="ipt" v-model="KeyWord">
          <button @click="searchList" class="sosuo">搜索</button>
          <!-- <></> -->
        </div>
      </div>
    </div>

    <!-- 这里渲染搜索的内容 -->
    <div class="movie_count">
      <h3>电影/电视剧/综艺节目</h3>
       <IndexList :movieList="searchs" ></IndexList>
    </div>

    <div>
      <h3>影院</h3>
    </div>
  </div>
</template>

<script>
import IndexList from "../components/IndexList"

export default {
  data() {
    return {
      KeyWord: "",
      searchs: [],
      cinemas: [],
    };
  },
  created(){

  },
  methods: {
    searchList() {
       let search_movie = "/search";
    this.axios
      .get(search_movie, {
        params: {
          kw: this.KeyWord,
          cityId: 20, //城市ID
          stype: -1,
          movieId: this.$route.params.id
        }
      }).then(res => {
        this.searchs = res.data.movies.list;
        console.log(this.searchs);
      }).catch(err => {
        console.warn(err);
      })
      console.log(this.KeyWord);
    },
    goMovieDetail(id) {
      this.$router.push({
        name: 'Aa',
        params: {
          id:movieId
        }
      })
    },
    goCineamsDetail(id) {
      this.$router.push({
        name: 'Details',
        params: {
          cinemaId: id
        }
      })
    }
  },
  components: {
    IndexList
  },
};
</script>



<style lang="scss" scoped>
#search {
  background-color: #f5f5f5;
  height: 6vh;
}
.search_bar {
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  padding: 8px 0 8px 10px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #e5e5e5;
  z-index: 1;
}
#ipt {
  padding: 0 10px;
  border: 1px solid #e6e6e6;
  border-radius: 5px;
  background-color: #fff;
  -webkit-box-flex: 1;
  flex-grow: 1;
  height: 7vw;
}
.sosuo {
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  font-size: 16px;
  color: #f03d37;
  background-color: transparent;
  outline: none;
  position: relative;
  right: 0;
}
h3{
  font-size: 15px;
  color: #999;
  padding: 9px 15px;
  text-align: left;
  border-bottom: 1px solid #e6e6e6;
}
</style>



